
var store_departamento;
var store_perfil;

Ext.onReady(function()
{
    store_departamento = new X.store.Json({
        fields : [
            'codigoDepartamento',
            'nombreDepartamento'
        ]
    });

    store_perfil = new X.store.Json({
        fields : [
            'codigoPerfil',
            'nombrePerfil'
        ]
    });

    new X.form.FormPanel({

        title            : 'Editar Usuario',
        submitButtonText : 'Guargar',
        returnButtonText : 'Cancelar',
        submitUrl        : '/usuario/ajax-editar',
        returnUrl        : '/usuario/listar',
        width            : 800,
        height           : 380,
        labelWidth       : 90,
        layout           : 'absolute',

        items:[
            new Ext.form.FieldSet({x:15, y:10, width:366, title:'Usuario', items:
            [
                new X.field.Hidden({                         id:'codigoUsuario'       }),
                new X.field.Text  ({fieldLabel:'Usuario',    id:'username',  width:230}),
                new X.field.Combo ({
                    id           : 'perfil',
                    hiddenName   : 'codigoPerfil',
                    fieldLabel   : 'Perfil',
                    valueField   : 'codigoPerfil',
                    displayField : 'nombrePerfil',
                    width        : 230,
                    store        : store_perfil
                })
            ]}),
            new Ext.form.FieldSet({x:15, y:110, width:366, title:'Modificar Contraseña', checkboxToggle: true, collapsed: true, items:
            [
                new X.field.Pass  ({fieldLabel:'Contraseña', id:'password',  width:230, checkedBy:'confirmar'}),
                new X.field.Pass  ({fieldLabel:'Confirmar',  id:'confirmar', width:230, checkPass:'password'})
            ],
                listeners:{
                    collapse:function(){
                        Ext.getCmp('password') .setValue('');
                        Ext.getCmp('confirmar').setValue('');
                        Ext.getCmp('password') .setDisabled(true);
                        Ext.getCmp('confirmar').setDisabled(true);
                    },
                    expand:function(){
                        Ext.getCmp('password') .setValue('');
                        Ext.getCmp('confirmar').setValue('');
                        Ext.getCmp('password') .setDisabled(false);
                        Ext.getCmp('confirmar').setDisabled(false);
                    }
                }
            }),
            new Ext.form.FieldSet({x:405, y:10, width:366, title:'Información Personal', items:
            [
                new X.field.Text  ({fieldLabel:'Nombre',     id:'nombreUsuario',   width:230}),
                new X.field.Text  ({fieldLabel:'Apellido',   id:'apellido',        width:230}),
                new X.field.Text  ({fieldLabel:'Titulo',     id:'titulo',        width:230}),
                new X.field.Text  ({fieldLabel:'Cargo',      id:'cargo',        width:230}),
                new X.field.Email ({fieldLabel:'Email',      id:'email',           width:230}),
                new X.field.Number({fieldLabel:'Cedula',     id:'cedulaNro',       width:230}),
                new X.field.Date  ({fieldLabel:'Fecha Nac.', id:'fechaNacimiento', width:230}),
                new X.field.Text  ({fieldLabel:'Teléfono',   id:'telefono',        width:230}),
                new X.field.Text  ({fieldLabel:'Domicilio',  id:'domicilio',       width:230}),
                new X.field.Combo ({
                    id           : 'departamento',
                    hiddenName   : 'codigoDepartamento',
                    fieldLabel   : 'Departamento',
                    valueField   : 'codigoDepartamento',
                    displayField : 'nombreDepartamento',
                    width        : 230,
                    store        : store_departamento
                })
            ]})
        ]
    });
});
